<template>
  <div id="main" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      option: {
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        title: {
          text: ''
        },
        legend: {},
        radar: [
          {
            indicator: [
              { text: '逻辑思维', max: 100 },
              { text: '项目相关', max: 100 },
              { text: '基础知识', max: 100 },
              { text: '理论基础', max: 100 },
              { text: '高薪技术', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: 60,
            startAngle: 90,
            splitNumber: 4,
            shape: 'polygon',
            axisName: {
              formatter: '{value}',
              color: '#97a8be',
              height: '10px'
            },
            splitArea: {
              areaStyle: {
                color: ['#c7bec9'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',

            data: [
              {
                symbol: 'none',
                value: [80, 90, 60, 50, 70],
                areaStyle: {
                  color: '#2ec7c9',
                  opacity: 1
                }
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    this.option && myChart.setOption(this.option)
  }
}
</script>

<style></style>
